const transferMap = {
  mapDoc: {
    name: 'WMap地图文档',
    url: window.location.origin + '/wmap-doc/index.html',
    tag: ['js'],
    last_update: '2025-05-21'
  },
  LveRectangleJs: {
    name: 'LveRectangleJs 矩形框绘制',
    url: window.location.origin + '/lveRectangleJs/index.html',
    tag: ['js'],
    last_update: '2024-08-02'
  },
  // lyNova: {
  //   name: '程序员集合点',
  //   url: window.location.origin + '/lyNova/index.html',
  //   tag: ['html'],
  //   last_update: '2025-07-31'
  // },
  ['preview-img-js']: {
    name: 'previewImgJs 图片截图插件',
    url: window.location.origin + '/previewImgJs/index.html',
    tag: ['vue'],
    last_update: '2025-09-03'
  },
  ['generate-pdf-js']: {
    name: 'generatePdf 预览生成PDF插件',
    url: window.location.origin + '/generatePdfJs/index.html',
    tag: ['vue'],
    last_update: '2025-09-03'
  }
}
const rankingList = document.querySelector('#ranking-list');
const methods = {
  /**
   * 计算传入日期和今天的天数差
   * @param {*} targetDate 传入日期
   * @returns 
   */
  getDiffDate (targetDate) {
    let date1 = new Date(targetDate);
    let date2 = new Date();
    date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
    date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
    const diff = date2.getTime() - date1.getTime();
    const diffDate = diff / (24 * 60 * 60 * 1000);
    return diffDate;
  },
  /**
   * 格式化日期
   * @param {*} date 日期
   * @returns 
   */
  formatDate (date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth() 返回 0-11
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  },
  /**
   * 组装热度值列表
   */
  decoratePopulars (list) {
    rankingList.replaceChildren();
    const maxValue = list.sort((a, b) => b - a)[0].popular_value;
    list.filter(item => {
      return transferMap[item.page_from];
    }).forEach((item, index) => {
      // 转换后的项目名称
      const titleName = transferMap[item.page_from].name;
      // 跳转项目地址
      const url = transferMap[item.page_from].url;
      // 最后一次代码更新时间
      const lastUpdate = transferMap[item.page_from].last_update;
      // 今天距离最新更新日期相差的天数
      const diffDay = methods.getDiffDate(new Date(lastUpdate));
      let dayName = methods.formatDate(new Date(lastUpdate));
      if (diffDay === 0) {
        dayName = '今天';
      } else if (diffDay === 1) {
        dayName = '昨天';
      } else if (diffDay === 2) {
        dayName = '前天'
      }

      const rankingItem = document.createElement('div');
      rankingItem.classList.add('ranking-item');
      rankingItem.title = `点击即可跳转至 ${titleName}`
      rankingItem.addEventListener('click', () => {
        url && window.open(url)
      })
      const itemHeader = document.createElement('div');
      itemHeader.classList.add('item-header');

      const rank = document.createElement('div');
      rank.classList = ['rank rank-1'];
      rank.textContent = index + 1;
      itemHeader.appendChild(rank)

      const info = document.createElement('div');
      info.classList.add('item-info');

      const title = document.createElement('div');
      title.classList.add('item-title');
      title.textContent = titleName;
      info.appendChild(title);
      const meta = document.createElement('div');
      meta.classList.add('item-meta');
      meta.textContent = `${dayName}·更新`;
      info.appendChild(meta);

      itemHeader.appendChild(info);

      const itemContent = document.createElement('div');
      itemContent.classList.add('item-content');

      const heat = document.createElement('div');
      heat.classList.add('heat-value');
      const span1 = document.createElement('span');
      span1.classList.add('heat-value-span');
      span1.textContent = '热度指数';
      heat.appendChild(span1);
      const span2 = document.createElement('span');
      span2.classList.add('heat-value-span');
      span2.textContent = item.popular_value;
      heat.appendChild(span2);
      itemContent.appendChild(heat);

      const bar = document.createElement('div');
      bar.classList.add('heat-bar');
      const progress = document.createElement('div');
      progress.classList.add('heat-progress');
      progress.style.width = (item.popular_value / maxValue).toFixed(2) * 100 + '%';
      bar.appendChild(progress);
      itemContent.appendChild(bar);

      const description = document.createElement('div');
      description.classList.add('item-description');
      description.textContent = item.disc;
      itemContent.appendChild(description);

      const tags = document.createElement('div');
      tags.classList.add('tags');
      const tagList = transferMap[item.page_from].tag;
      tagList.forEach(t => {
        const tag = document.createElement('span');
        tag.classList.add('tag');
        tag.textContent = t;
        tags.appendChild(tag);
      })
      itemContent.appendChild(tags);

      rankingItem.appendChild(itemHeader);
      rankingItem.appendChild(itemContent);
      rankingList.appendChild(rankingItem)
    })

  },
  /**
   * 请求热度值列表
   */
  async requestPopularList () {
    const res = await fetch('http://1.95.157.217/api/common/getPopularList', {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    if (res.code === 0) {
      methods.decoratePopulars(res.data);
    }
  }
}

methods.requestPopularList();
